<template>
	<view>
		<u-search placeholder="输入单号搜索" v-model="searchNumber" @search="getData" :show-action="false"></u-search>
		<u-empty class="empty" text="暂无数据" mode="list" v-show="formData.length===0"></u-empty>
		<view class="order-list" v-for="item in formData" :key="item.id">
			<view class="box">
				<view class="order">订单号:{{item.number}}</view>
				<view class="name-phone">
					<view>收件人姓名:{{item.receiverName}}</view>
					<view>收件人电话:{{item.receiverPhone}}</view>
				</view>
				<view class="name-phone">
					<view>寄件人姓名:{{item.senderName}}</view>
					<view>寄件人电话:{{item.senderPhone}}</view>
				</view>
				<view class="time-state">
					<view>更新时间:{{formatTime(item.updateTime)}}</view>
					<view>物流状态:{{$state(item.state)}}</view>
				</view>
				<view class="button">
					<!-- <u-button size="mini" type="success" @click="print">打印</u-button> -->
					<u-button size="mini" @click="detail(item)">详情</u-button>
				</view>
			</view>
		</view>
		<pagination ref="Pagination" @update="getData"></pagination>
	</view>
</template>

<script>
	import pagination from '@/components/pagination/index.vue'
	import {
		format
	} from '@/utils/silly-datetime.js'
	const app = getApp();

	export default {
		name: 'OrderList',
		components: {
			pagination
		},
		data() {
			return {
				formData: [],
				searchNumber: ''
			}
		},
		mounted() {
			this.getData()

		},
		methods: {
			getData() {
				let pagination = this.$refs.Pagination
				let param = {
					number: this.searchNumber,
					size: 10,
					current: pagination.current
				}
				this.$api.pageCourierExpressOrderApi(param).then(result => {
					let response = result.resultParam.expressOrderPage
					this.formData = response.records
					pagination.total = response.total
				})
			},
			// 打印
			print() {
				let devId = this.$store.getters.devId
				let dev = JSON.parse(devId)
				if (devId) {
					app.globalData.btDevices = dev
				}
				if (!devId) { // 无打印设备，跳转选择 
					uni.navigateTo({
						url: '/pages/pinter/index',
						animationType: "slide-in-right",
						animationDuration: 100
					})
				} else { // 有打印设备，跳转打印
					uni.navigateTo({
						url: '/pages/print/print?devId=' + dev[0].devId,
						animationType: "zoom-fade-out",
						animationDuration: 100
					})
				}
			},
			// 详情
			detail(obj) {
				uni.navigateTo({
					url: `/pages/detail/index?id=${obj.id}&number=${obj.number}`,
					animationType: "zoom-fade-out",
					animationDuration: 100
				})
			},
			formatTime(time) {
				if (!time) return '';
				return format(time, 'YYYY-MM-DD HH:mm:ss');
			}
		}
	}
</script>

<style lang="scss">
	.empty {
		padding: 50%;
	}

	.order-list {
		.box {
			background-color: #FFFFFF;
			border-radius: 10rpx;
			margin: 10rpx;
			padding: 10rpx;
			font-size: 28rpx;
		}

		.order {
			font-size: 34rpx;
			font-weight: bold;
		}

		.name-phone,
		.time-state {
			display: flex;
			justify-content: space-between;
		}

		.button {
			text-align: right;
			margin-top: 10rpx;
		}
	}
</style>
